<div id="main" class="palm-hasheader">
	<div class="palm-header left" id="list-header"><center><span id='page-title'>SageTV - Remote Control</span></center></div>
</div>
<div id="admobHTMLLocation">
	<!-- AdMob Drawer -->
	<table class="palm-divider collapsible" id="admobDiv" x-mojo-touch-feedback="delayed">
	  <tr>
		  <td class="left"></td>
		  <td class="label" style="color: #ffffff">
			<span>Advertisement</span>
		  </td>
		  <td class="line" width="100%"></td>
		  <td><div id="admobButton" class="palm-arrow-expanded arrow_button"></div></td>
		  <td class="right"></td>
		</tr>
	</table>
	<div id='admobDrawer' x-mojo-element="Drawer">
		<div id='admobContainer' style="position:relative; height:48px">
			<div id='admobSpawn'></div>
			<!--div id='admobContainer'-->
			<!--div id='admobSpawn'></div--></span>
		</div>
	</div>
</div>
<!-- Media Keys -->
<table class="palm-divider collapsible" id="mediaKeysDiv" x-mojo-touch-feedback="delayed">
  <tr>
      <td class="left"></td>
      <td class="label" style="color: #ffffff">
		<span>Media Keys</span>
      </td>
      <td class="line" width="100%"></td>
      <td><div id="mediaKeysButton" class="palm-arrow-closed arrow_button"></div></td>
      <td class="right"></td>
    </tr>
</table>
<div id='mediaKeysDrawer' x-mojo-element="Drawer" style="background-image:url('images/background.png')">
	<span>
	<table width="100%" cellpadding="0" border="0">
		<tbody>
		<tr>
			<td width="50%"><div class="palm-button negative" id="power_button">Sleep</div></td>
			<td width="50%"><div x-mojo-element="Button" id="home_button"></div></td>
		</tr>
		<tr>
			<td width="50%"><div x-mojo-element="Button" id="sage_recordings_button"></div></td>
			<td width="50%"><div x-mojo-element="Button" id="recording_sched_button"></div></td>
		</tr>
		<tr>
			<td width="50%"><div x-mojo-element="Button" id="fullscreen_button"></div></td>
			<td width="50%"><div x-mojo-element="Button" id="settings_button"></div></td>
		</tr>
		<tr>
			<td width="50%"><div x-mojo-element="Button" id="livetv_button"></div></td>
			<td width="50%"><div x-mojo-element="Button" id="guide_button"></div></td>
		</tr>
		<tr>
			<td width="50%"><div x-mojo-element="Button" id="info_button"></div></td>
			<td width="50%"><div x-mojo-element="Button" id="videos_button"></div></td>
		</tr>
		<tr>
			<td width="50%"><div x-mojo-element="Button" id="music_button"></div></td>
			<td width="50%"><div x-mojo-element="Button" id="photos_button"></div></td>
		</tr>
		</tbody>
	</table>
	</span>
</div>
<!-- Playback Controls -->
<table class="palm-divider collapsible" id="playbackDiv" x-mojo-touch-feedback="delayed">
  <tr>
      <td class="left"></td>
      <td class="label" style="color: #ffffff">
		<span>Playback Controls</span>
      </td>
      <td class="line" width="100%"></td>
      <td><div id="playbackButton" class="palm-arrow-closed arrow_button"></div></td>
      <td class="right"></td>
    </tr>
</table>
<div id='playbackDrawer' x-mojo-element="Drawer">
	<span>
	<table width="100%" cellpadding="0" border="0">
		<tbody>
		<tr>
			<td width="33%"><div class="palm-button negative" id="record_button">Rec.</div></td>
			<td width="33%"><div x-mojo-element="Button" id="pause_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="stop_button"></div></td>
		</tr>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="fr_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="play_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="ff_button"></div></td>
		</tr>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="rskip_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="del_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="fskip_button"></div></td>
		</tr>
		</tbody>
	</table>
	</span>
</div>
<!-- Number Pad -->
<table class="palm-divider collapsible" id="numberPadDiv" x-mojo-touch-feedback="delayed">
  <tr>
      <td class="left"></td>
      <td class="label" style="color: #ffffff">
		<span>Number Pad</span>
      </td>
      <td class="line" width="100%"></td>
      <td><div id="numberPadButton" class="palm-arrow-closed arrow_button"></div></td>
      <td class="right"></td>
    </tr>
</table>
<div id='numberPadDrawer' x-mojo-element="Drawer">
	<span>
	<table width="100%" cellpadding="0" border="0">
		<tbody>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="num1_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="num2_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="num3_button"></div></td>
		</tr>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="num4_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="num5_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="num6_button"></div></td>
		</tr>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="num7_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="num8_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="num9_button"></div></td>
		</tr>
		<tr>
			<td width="33%"></td>
			<td width="33%"><div x-mojo-element="Button" id="num0_button"></div></td>
			<td width="33%"></td>
		</tr>
		</tbody>
	</table>
	</span>
</div>
<!-- Navigation -->
<table class="palm-divider collapsible" id="navigationDiv" x-mojo-touch-feedback="delayed">
  <tr>
      <td class="left"></td>
      <td class="label" style="color: #ffffff">
		<span>Navigation</span>
      </td>
      <td class="line" width="100%"></td>
      <td><div id="navigationButton" class="palm-arrow-closed arrow_button"></div></td>
      <td class="right"></td>
    </tr>
</table>
<div id='navigationDrawer' x-mojo-element="Drawer">
	<span>
	<table width="100%" cellpadding="0" border="0">
		<tbody>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="volUp_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="arrowUp_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="chUp_button"></div></td>
		</tr>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="arrowLeft_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="enter_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="arrowRight_button"></div></td>
		</tr>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="volDown_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="arrowDown_button"></div></td>
			<td width="33%"><div x-mojo-element="Button" id="chDown_button"></div></td>
		</tr>
		<tr>
			<td width="33%"><div x-mojo-element="Button" id="mute_button"></div></td>
			<td width="33%"></td>
			<td width="33%"><div x-mojo-element="Button" id="prevCh_button"></div></td>
		</tr>
		</tbody>
	</table>
	</span>
</div>